<template>
    <el-dialog class="good_spec_template_dialog" title="编辑商品" v-model="visible" width="80%" @close="closedCallback">
        <el-form v-loading="loading" :model="form" :rules="rules" ref="formRef" label-width="120px">
            <!-- 仅商品展示 -->
            <el-form-item label="商品" v-if="form.goodsType == 1">
                <el-table class="custom-table-fit" :data="[{}]">
                    <el-table-column v-for="{ prop, ...rest } in tableColumns" :key="prop" :prop="prop" v-bind="rest">
                        <template #default>
                            <div class="custom-goods-name" v-if="prop === 'goodsName'">
                                <el-image
                                    style="width: 40px; height: 40px; min-width: 40px; margin-right: 4px"
                                    :src="selectData?.materialSrc?.materialSrc"
                                    fit="fill"></el-image>
                                <el-tooltip effect="dark" :content="selectData.goodsName" placement="top">
                                    <span class="custom-goods-name-span">{{ selectData.goodsName }}</span>
                                </el-tooltip>
                            </div>
                            <span v-if="prop === 'shopInfo'">
                                {{ selectData?.shopInfo?.[0]?.shopName }}
                            </span>
                            <span v-if="!['goodsName', 'shopInfo'].includes(prop)">
                                {{ selectData[prop] }}
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <!-- 商品展示兑换价，其他展示商品 -->
            <el-form-item :label="form.goodsType == 1 ? '兑换价' : '商品'" prop="skuSelect">
                <!-- todo:不同商品编辑状态下的展示 -->
                <div v-if="form.goodsType == 1">
                    {{
                        form.pointsConsumerType == 1
                            ? `使用统一兑换比例：${query.points}积分=${query.rmb}元`
                            : '自定义兑换价'
                    }}
                </div>
                <!-- 商城商品 -->
                <el-table class="custom-table-fit" v-if="form.goodsType == 1" :data="skuSelect">
                    <el-table-column
                        v-for="{ prop, ...rest } in skuTableColumnsCopy"
                        :key="prop"
                        :prop="prop"
                        v-bind="rest">
                        <template #default="{ row }">
                            <template v-if="prop === 'specAttr'">
                                {{ row?.specAttr?.map(item => item.attributeValue)?.join('；') }}
                            </template>
                            <template v-if="prop === 'skuPrice'">
                                {{ `￥${row.skuPrice / 100}` }}
                            </template>
                            <template v-if="prop === 'points'">
                                <template v-if="form.pointsConsumerType == 1">
                                    {{ (row?.skuPrice * (query.points / query.rmb)) / 100 }}积分
                                </template>
                                <!-- todo:自定义兑换价 -->
                                <template v-if="form.pointsConsumerType == 2">
                                    <el-input-number
                                        v-model="row.money"
                                        class="width-60"
                                        :max="99999999"
                                        :min="0"
                                        :precision="2"
                                        :controls="false" />
                                    元+
                                    <el-input-number
                                        v-model="row.points"
                                        class="width-60"
                                        :max="99999999"
                                        :min="1"
                                        :precision="0"
                                        :controls="false" />
                                    积分
                                </template>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 抽奖 -->
                <el-table class="custom-table-fit" v-if="form.goodsType == 3" :data="skuSelect">
                    <el-table-column
                        v-for="{ prop, ...rest } in drawTableColumns"
                        :key="prop"
                        :prop="prop"
                        v-bind="rest">
                        <template #default="{ row }">
                            <!-- todo:自定义兑换价 -->
                            <template v-if="prop === 'points'">
                                <el-input-number
                                    v-model="row.money"
                                    class="width-60"
                                    :max="99999999"
                                    :min="0"
                                    :precision="2"
                                    :controls="false" />
                                元 +
                                <el-input-number
                                    v-model="row.points"
                                    class="width-60"
                                    :max="99999999"
                                    :min="1"
                                    :precision="0"
                                    :controls="false" />
                                积分
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 优惠卷 -->
                <el-table class="custom-table-fit" v-if="form.goodsType == 2" :data="skuSelect">
                    <el-table-column
                        v-for="{ prop, ...rest } in couponTableColumns"
                        :key="prop"
                        :prop="prop"
                        v-bind="rest">
                        <template #default="{ row }">
                            <!-- todo:自定义兑换价 -->
                            <template v-if="prop === 'points'">
                                <el-input-number
                                    v-model="row.money"
                                    class="width-60"
                                    :max="99999999"
                                    :min="0"
                                    :precision="2"
                                    :controls="false" />
                                元 +
                                <el-input-number
                                    v-model="row.points"
                                    class="width-60"
                                    :max="99999999"
                                    :min="1"
                                    :precision="0"
                                    :controls="false" />
                                积分
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <!-- 优惠券，抽奖显示 -->
            <el-form-item label="商品名称" prop="goodsName" v-if="[2, 3].includes(form.goodsType)">
                <el-input
                    v-model.trim="form.goodsName"
                    class="good-name-input"
                    maxlength="50"
                    show-word-limit></el-input>
            </el-form-item>
            <!-- 抽奖显示 -->
            <el-form-item label="总兑换数" prop="totalExchange" v-if="form.goodsType == 3">
                <el-radio-group v-model="form.totalUnlimit" @change="handleTotalChange">
                    <el-radio :label="1">无限制</el-radio>
                    <el-radio :label="0">一共</el-radio>
                </el-radio-group>
                <el-input-number
                    :disabled="form.totalUnlimit == 1"
                    v-model="form.totalExchange"
                    class="custom-number-small"
                    :min="0"
                    :max="99999999"
                    :precision="0"
                    :controls="false" />件
            </el-form-item>
            <el-form-item label="每单兑换数量" prop="limit">
                <el-radio-group v-model="radioVal" @change="handleLimitChange">
                    <el-radio :label="1">无限制</el-radio>
                    <el-radio :label="2">最多</el-radio>
                </el-radio-group>
                <el-input-number
                    :disabled="radioVal == 1"
                    v-model="form.limit"
                    class="custom-number-small"
                    :min="0"
                    :max="99999999"
                    :precision="0"
                    :controls="false" />件
            </el-form-item>
        </el-form>
        <template #footer>
            <div style="flex: auto">
                <el-button plain @click="handleVisible(false)">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, unref, nextTick } from 'vue';
import { cloneDeep } from '@/commons/utils';
import { ElMessage } from 'element-plus';
import request from '@/request';
import { debounce } from 'lodash';

const props = defineProps({
    query: {
        type: Object,
        default: () => {}
    }
});

const emit = defineEmits(['handle-confirm']);

const formRef = ref();

let visible = ref(false);
let radioVal = ref(1);
const form = reactive({
    id: null,
    shopId: '',
    limit: null,
    totalUnlimit: 1,
    totalExchange: null,
    goodsName: null, // todo:商品名称
    goodsImg: null, // todo:商品图片，只有优惠券和抽奖机会有
    goodsType: 2, // todo:商品类型
    pointsConsumerType: 2 // todo:兑换价类型
});
const formClone = cloneDeep(form);
let loading = ref(false);

let selectData = reactive({});
// todo:优惠券和抽奖表格
// todo:去掉操作
const tableColumns = reactive([
    { label: '商品信息', prop: 'goodsName' },
    { label: '店铺来源', prop: 'shopName' }
    // { label: '操作', prop: 'operation', width: '100' }
]);
const skuTableColumns = reactive([
    { label: '规格信息', prop: 'specAttr', showOverflowTooltip: true },
    { label: '库存', prop: 'skuStock' },
    { label: '价格（元）', prop: 'skuPrice' }
]);
const skuTableColumnsCopy = computed(() => {
    const cols = cloneDeep(skuTableColumns);
    cols.push({ label: '兑换价', prop: 'points', width: form.pointsConsumerType == 1 ? '' : '250' });
    return cols;
});
const couponTableColumns = reactive([
    { label: '优惠券名称', prop: 'couponName', showOverflowTooltip: true },
    { label: '库存', prop: 'restNumber' },
    { label: '来源店铺', prop: 'shopName' },
    { label: '兑换价', prop: 'points', width: '250' }
    // { label: '操作', prop: 'operation', width: '100' }
]);
const drawTableColumns = reactive([
    { label: '抽奖活动名称', prop: 'activityName', showOverflowTooltip: true },
    { label: '来源店铺', prop: 'shopName' },
    { label: '兑换价', prop: 'points', width: '250' }
    // { label: '操作', prop: 'operation', width: '100' }
]);
let skuSelect = reactive([]);
const checkSelect = (rule, val, callback) => {
    if (!skuSelect || !skuSelect.length) {
        // 优惠券
        if (form.goodsType == 2) {
            return callback('请选择优惠券');
        }
        // 抽奖活动
        if (form.goodsType == 3) {
            return callback('请选择抽奖活动');
        }
        return callback('请选择商品');
    }
    if (form.pointsConsumerType == 2) {
        const isEmpty = skuSelect.some(
            item => [null, undefined].includes(item.points) || [null, undefined].includes(item.money)
        );
        if (isEmpty) {
            return callback('请填写兑换价');
        }
        const isGreater = skuSelect.some(item => item.money > item.skuPrice / 100);
        if (isGreater) {
            return callback('兑换价现金值不能大于销售价格');
        }
    }
    callback();
};
const checkLimit = (rule, val, callback) => {
    if (radioVal.value == 2 && !val) {
        return callback('每单兑换数量必须是正整数');
    }
    callback();
};
const checkTotal = (rule, val, callback) => {
    if (form.totalUnlimit == 0 && !val) {
        return callback('每单兑换数量必须是正整数');
    }
    callback();
};
const checkPrice = (rule, val, callback) => {
    if (!val) {
        return callback('不能为空');
    }
    callback();
};
const checkPoint = (rule, val, callback) => {
    if (!val || val <= 0) {
        return callback('必须是正整数');
    }
    callback();
};
const rules = {
    skuSelect: [{ required: true, trigger: 'blur', validator: checkSelect }],
    goodsName: [
        { required: true, message: '请输入商品名称', trigger: 'blur' },
        { max: 50, message: '最长不超过50个字', trigger: 'blur' }
    ],
    limit: [{ required: true, trigger: 'blur', validator: checkLimit }],
    totalExchange: [{ required: true, trigger: 'blur', validator: checkTotal }]
};

// todo:单个检验
const priceRules = [{ required: true, trigger: 'blur', validator: checkPrice }];
const pointRules = [{ required: true, trigger: 'blur', validator: checkPoint }];

// todo: 不同判定computed rules

const clearValidate = field => {
    unref(formRef).clearValidate(field);
};
const validateField = field => {
    unref(formRef).validateField(field);
};

// todo:handleVisible改造
const handleEdit = row => {
    form.id = row.id;
    getDetail();
    handleVisible(true);
};
const handleVisible = (isVisible = false) => {
    visible.value = isVisible;
};
const closedCallback = () => {
    // 关闭后的回调
    const keys = Object.keys(selectData);
    let obj = {};
    keys.forEach(item => {
        obj[item] = null;
    });
    // todo:不同商品置空不同
    Object.assign(selectData, obj);
    Object.assign(form, cloneDeep(formClone));
    formRef.value.resetFields();
};

const handleLimitChange = val => {
    form.limit = null;
    clearValidate('limit');
};

const handleTotalChange = val => {
    form.totalExchange = null;
    clearValidate('totalExchange');
};

const getDetail = async () => {
    loading.value = true;
    const { data } = await request('pointsGoodsDetail', { id: form.id });
    // todo:详情
    const {
        id,
        goodsName,
        shopId,
        shopInfo,
        goodsImg,
        goodsType,
        pointsConfig,
        materialSrc,
        skuInfo,
        points: pointsCopy,
        money: moneyCopy,
        couponList,
        luckDraw
    } = data || {};
    const { pointsConsumerType, limitConfig } = pointsConfig || {};
    const { value: limit, totalExchange, totalUnlimit } = limitConfig || {};
    radioVal.value = limit ? 2 : 1;
    if (goodsType == 1) {
        // 获取商城商品
        selectData.id = materialSrc?.goodsId;
        selectData.goodsName = goodsName;
        selectData.shopName = shopInfo?.shopName;
        selectData.materialSrc = materialSrc;
        skuSelect.length = 0;
        // todo:统一兑换比例和自定义价格，兑换价不同
        skuSelect.push(
            ...(skuInfo.map(({ id, skuPrice, points: pointsCopy, specAttr, skuStock, money: moneyCopy }) => {
                return {
                    id,
                    specAttr,
                    skuStock,
                    skuPrice,
                    points: pointsCopy / 100,
                    money: moneyCopy / 100
                };
            }) || [])
        );
    }
    if (goodsType == 2) {
        // 优惠券商品
        const { couponId, couponName, stock: restNumber } = couponList || {};
        skuSelect.length = 0;
        skuSelect.push({
            couponId,
            couponName,
            restNumber,
            shopName: shopInfo?.shopName,
            points: pointsCopy / 100,
            money: moneyCopy / 100
        });
    }
    if (goodsType == 3) {
        // 抽奖商品
        const { activityId, activityName, stock: restNumber } = luckDraw || {};
        skuSelect.length = 0;
        skuSelect.push({
            activityId,
            activityName,
            restNumber,
            shopName: shopInfo?.shopName,
            points: pointsCopy / 100,
            money: moneyCopy / 100
        });
    }
    Object.assign(form, {
        id,
        goodsName,
        shopId,
        limit: limit || null,
        totalUnlimit,
        totalExchange: totalUnlimit == 1 ? null : totalExchange,
        goodsImg: goodsImg,
        goodsType,
        pointsConsumerType
    });
    loading.value = false;
};

const handleConfirm = debounce(async () => {
    if (!unref(formRef)) return;
    await unref(formRef).validate(async (valid, fields) => {
        if (valid) {
            const { limit, totalExchange, totalUnlimit, ...rest } = cloneDeep(form);
            // 商品
            const goodsList =
                form.goodsType == 1
                    ? [
                          {
                              goodId: selectData?.id,
                              skuList: skuSelect?.map(
                                  ({ id: skuId, skuPrice, points: pointsCopy, money: moneyCopy }) => {
                                      // 统一兑换比例和自定义兑换不同
                                      const points =
                                          form.pointsConsumerType == 1
                                              ? Math.round(skuPrice * (props.query.points / props.query.rmb))
                                              : pointsCopy * 100;
                                      const item = {
                                          skuId,
                                          points,
                                          money: Math.round(moneyCopy * 100)
                                      };
                                      return item;
                                  }
                              )
                          }
                      ]
                    : null;
            // 优惠券和抽奖
            const { couponId, points: pointsCopy, money: moneyCopy, activityId } = skuSelect?.[0] || {};
            const couponList =
                form.goodsType == 2
                    ? {
                          couponId,
                          points: pointsCopy * 100,
                          money: Math.round(moneyCopy * 100)
                      }
                    : null;
            const luckDraw =
                form.goodsType == 3
                    ? {
                          activityId,
                          points: pointsCopy * 100,
                          money: Math.round(moneyCopy * 100)
                      }
                    : null;
            const total_exchange = form.totalUnlimit == 1 ? 0 : totalExchange || 0;
            const total_unlimit = totalUnlimit;
            const { code } = await request('pointsGoodsAdd', {
                ...rest,
                limitConfig: {
                    type: 'per_buy_max_count',
                    value: radioVal.value == 1 ? 0 : limit || 0,
                    total_exchange,
                    total_unlimit
                },
                goodsList,
                couponList,
                luckDraw
            });
            if (code !== 0) {
                return;
            }
            ElMessage({
                type: 'success',
                message: '修改成功'
            });
            handleVisible();
            emit('handle-confirm');
        } else {
            unref(formRef).scrollToField(Object.keys(fields)?.[0]);
        }
    });
}, 500);

defineExpose({
    handleEdit
});
</script>

<style lang="scss">
.good_spec_template_dialog {
    max-width: 1000px;
    min-width: 900px;
    .el-input-number .el-input__inner {
        text-align: left;
    }
    .el-radio__input.is-checked + .el-radio__label {
        color: var(--el-table-text-color);
    }
    .custom-table-fit {
        width: 90%;
        max-width: 90%;
    }
    .custom-goods-name {
        display: inline-flex;
        align-items: center;
        width: 100%;
        &-span {
            display: -webkit-box;
            max-width: calc(100% - 45px);
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    }
}
</style>
<style lang="scss" scoped>
.good_spec_template_dialog {
    .width-60 {
        width: 60px;
    }
    .custom-group {
        .radio-item {
            width: 100%;
            display: flex;
            :deep .el-radio {
                margin-right: 16px;
            }
        }
    }
    .good-name-input {
        width: 350px;
    }
    .custom-number-small {
        width: 80px;
        margin: 0 4px 0 4px;
    }
    .custom-number-small-s {
        width: 160px;
    }

    .custom-point-tag {
        margin-left: 5px;
        border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
        color: var(--el-disabled-text-color);
        background-color: var(--el-disabled-bg-color);
        border-color: var(--el-disabled-border-color);
        /* box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset; */
    }
}
</style>
